<template>
    <div>
        <h1>基本信息</h1>
        <el-form :model="form">
            <el-form-item label="商品标题" :label-width="formLabelWidth">
                <el-input v-model="form.title" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="子标题" :label-width="formLabelWidth">
                <el-input v-model="form.subTitle" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="商品分类" :label-width="formLabelWidth">
                <el-input v-model="form.subTitle" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="商品分类" :label-width="formLabelWidth">
                <div class="block">
<!--                    <span class="demonstration">默认 click 触发子菜单</span>-->
                    <el-cascader
                            v-model="categories"
                            :options="categoryData"
                            @change="selectCategory"
                            :props="props">
                    </el-cascader>
                </div>
            </el-form-item>

<!--            <el-form-item label="活动名称" :label-width="formLabelWidth">-->
<!--                <el-upload-->
<!--                        class="avatar-uploader"-->
<!--                        action="http://api.blb.com/api/upload-api/upload/commons"-->
<!--                        :show-file-list="false"-->
<!--                        :on-success="handleAvatarSuccess"-->
<!--                        :before-upload="beforeAvatarUpload">-->
<!--                    <img v-if="form.image" :src="form.image" class="avatar">-->
<!--                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
<!--                </el-upload>-->
<!--            </el-form-item>-->
        </el-form>
    </div>
</template>

<script>
    var _this=this;
    export default {
        name: "GoodsBasic",
        //自定义属性，申明从父页面(Goods页面)传过来的数据“form” 这个名字可以自定义
        props:{
            form:{
                type:Object
            }
        },
        data(){
            return{
                formLabelWidth: '120px',
                categories:[],
                // 这个三级数据从后台获取
                categoryData:[],
                // lazy开启动态加载
                props: {
                    lazy: true,
                    lazyLoad (node, resolve) {
                        console.log(node.data.id);
                        //点击分类后加载子分类 _this指的是级联菜单，前面需要定义
                        _this.$http.get("http://api.blb.com/api/goods-api/category/parent/" + node.data.id)
                            .then(res => {
                                if (res.data.code == 1) {
                                    // 查到数据加入到子节点
                                    resolve(res.data.data);
                                }
                            });
                    }
                }
            }
        },
        methods:{
            // 获得选中数据
            selectCategory(data){
                console.log(data);
            },
            // 根据父分类加载子分类
            loadCategory(pid) {
                this.$http.get("http://api.blb.com/api/goods-api/category/parent/" + pid)
                    .then(res => {
                        if (res.data.code == 1) {
                            this.categoryData = res.data.data;
                        }
                    })
            },
        },
        mounted() {
            this.loadCategory(0);
            _this=this;
        }

    }
</script>

<style scoped>

</style>